import React, {PureComponent} from 'react';

class A extends PureComponent {

    state={
        name:'Tom'
    }


    render() {
        const {name}=this.state
        return (
            <div>
                <h1>我是A组件</h1>
                <B render={()=>{
                    return <C name={name}/>
                }}/>
            </div>
        );
    }
}

class B extends PureComponent {

    render() {

        return (
            <div>
                <h1>我是B组件</h1>
                {this.props.render()}
            </div>
        );
    }
}


class C extends PureComponent {

    render() {

        return (
            <div>
                <h1>我是C组件</h1>
                <h3>{this.props.name}</h3>
            </div>
        );
    }
}

class D extends PureComponent {

    render() {

        return (
            <div>
                <h1>我是D组件</h1>
            </div>
        );
    }
}

export default A;